<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TAB选项卡1</title>
    <style>
        body{
            background-color: #006266;
            color: #fff;
            font-family: Arial, Helvetica, sans-serif;
        }
        #main{
            margin: 200px auto;
            width: 650px;
            height: 300px;
            /* background-color: blanchedalmond; */
            display: grid;
            grid-template-rows: 100px 100px 100px;
            grid-template-columns: 500px 150px ;
            gap: 5px;
            overflow: hidden;
        }
        input{
            display: none;
        }
        #tab{
            grid-row: 1/4;
            grid-column: 1/2;
            background-color: #5758bb;
            transition: 1s;
        }
        label{
            text-align: center;
            line-height: 100px;
            font-size: 3em;
        }
        .tab_s{
            width: 500px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            font-size: 5em;
        }
        .tab_s:first-child{
            background-color: #12cbc4;
        }
        .tab_s:nth-child(2){
            background-color: #fda7df;
        }
        .tab_s:nth-child(3){
            background-color: #bb5757;
        }
        #l1{
            grid-row: 1/2;
            grid-column: 2/3;
            background-color: #12cbc4;
        }
        #l2{
            grid-row: 2/3;
            grid-column: 2/3;
            background-color: #fda7df;
        }
        #l3{
            grid-row: 3/4;
            grid-column: 2/3;
            background-color: #bb5757;
        }
        #b1:checked ~ #tab{
            transform: translateY(0px);
        }
        #b2:checked ~ #tab{
            transform: translateY(-300px);
        }
        #b3:checked ~ #tab{
            transform: translateY(-600px);
        }
    </style>
</head>
<body>
        <div id="main">
            <input type="radio" name="button" id="b1">
            <input type="radio" name="button" id="b2">
            <input type="radio" name="button" id="b3">
            <label for="b1" id="l1">AA</label>
            <label for="b2" id="l2">BB</label>
            <label for="b3" id="l3">CC</label>
            <div id="tab">
                <div class="tab_s">contentAA</div>
                <div class="tab_s">contentBB</div>
                <div class="tab_s">contentCC</div>
            </div>
        </div>
</body>
</html>